<template>

  <div>
    <div style="margin: 16px 0 0 30px ">
      <!--<el-button  type="success" round @click="dialogFormVisiblePost = true" >添加</el-button>-->
    </div>
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column align="center" label="订单ID" width="95">
          <template slot-scope="scope">
            {{ scope.row.orderId }}
          </template>
        </el-table-column>
        <el-table-column label="订单价格（￥）"  width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.orderPrice }}
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.addressLists[0].addrDetail}}
          </template>
        </el-table-column>
        <el-table-column label="收件人"  width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.addressLists[0].addrNicname}}
          </template>
        </el-table-column>
        <el-table-column label="收件人电话"  width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.addressLists[0].addrPhone}}
          </template>
        </el-table-column>
        <el-table-column label="下单用户和电话" width="150" align="center">
          <template slot-scope="scope">
            {{scope.row.addressLists[0].usersLists[0].userName}} : {{scope.row.addressLists[0].usersLists[0].userPhone}}
          </template>
        </el-table-column>
        <el-table-column label="下单产品"  width="180" align="center">
          <template slot-scope="scope">
            <!--    {{scope.row.cartLists[0].goodsCharacterList[0]}}   &lt;!&ndash;可以，不知道为什么拿下一层数据就不行&ndash;&gt;-->
            {{scope.row.cartLists[0].goodsCharacterList[0].goodsList[0].goodsName}}({{scope.row.cartLists[0].goodsCharacterList[0].characterName}})
          </template>
        </el-table-column>
        <el-table-column label="类型"  width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.cartLists[0].goodsCharacterList[0].goodsList[0].categoryList[0].categoryName}}
          </template>
        </el-table-column>
        <el-table-column label="状态(是否签收，绿色签收)">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.orderState == 0?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column class-name="status-col" label="Status" width="110" align="center">
           <template slot-scope="scope">
             <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
           </template>
         </el-table-column>-->
        <el-table-column align="center" prop="created_at" label="订单时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.orderDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center" width="200px">
          <template slot-scope="scope">
            <!-- <el-button type="primary" round @click="dialogFormVisiblePutId(scope.$index)">修改</el-button>-->
            <el-button type="danger" icon="el-icon-delete" circle @click="orderDel(scope.row.orderId)"> </el-button>
          </template>
        </el-table-column>
      </el-table>




      <!--添加类型-->
      <!--    <el-dialog title="添加订单"  :visible.sync="dialogFormVisiblePost">-->
      <!--      <el-form :model="listPost">-->
      <!--        <el-form-item>-->
      <!--          <h2>请输入新增的类型 ： </h2>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="新增类型: " :label-width="formLabelWidth">-->
      <!--          <el-input v-model="listPost.categoryName" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogFormVisiblePost = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="dialogFormVisiblePostGo(listPost.categoryName)">确 定</el-button>-->
      <!--      </div>-->
      <!--    </el-dialog>-->


      <!--修改类型-->
      <!--    <el-dialog title="修改订单"  :visible.sync="dialogFormVisiblePut">-->
      <!--      <el-form :model="listPut">-->
      <!--        <el-form-item>-->
      <!--          <h2>可修改内容如下：</h2>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="订单价格: " :label-width="formLabelWidth">-->
      <!--          <el-input v-model="listPut.orderPrice" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="收货地址ID: " :label-width="formLabelWidth">-->
      <!--          <el-input v-model="listPut.addressId" autocomplete="off"></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <!--      <div slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogFormVisiblePut = false">取 消</el-button>-->
      <!--        <el-button type="primary" @click="dialogFormVisiblePutGo(listPut)">确 定</el-button>-->
      <!--      </div>-->
      <!--    </el-dialog>-->
    </div>
  </div>
</template>

<script>
  // import { getList } from '@/api/table'
  import { orderListApi,orderDelApi,dialogFormVisiblePutApi } from '@/api/server-orders'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        addressLists: [{
          addrId: null,
          addrDetail: null,
          addrPhone: null,
          addrNicname: null,
          addrState: null,
          addrUser: null,
        }],
        listPut: [  // 修改订单的数据
          {
            orderId: null,
            userId: null,
            orderDate: null,
            addressId: null,
            orderPrice: null,
            orderExpressno: null,
            cartId: null,
            orderState: null,
            addressLists: [ //可能是v-model的双引号识别不了下标，然后写出来在上面，所以注解了
              {
                addrId: null,
                addrDetail: null,
                addrPhone: null,
                addrNicname: null,
                addrState: null,
                addrUser: null,
                usersLists: [
                  {
                    createTime: null,
                    updateTime: null,
                    userId: null,
                    userName: null,
                    userPassword: null,
                    userPhone: null,
                    userEmail: null,
                    userImg: null,
                    userSalt: null,
                    credentialsSalt: null
                  }
                ]
              }
            ],
            cartLists: [
              {
                cartId: null,
                cartCharacter: null,
                cartNum: null,
                cartPrice: null,
                cartUser: null,
                cartStatus: null,
                usersList: [
                  {
                    createTime: null,
                    updateTime: null,
                    userId: null,
                    userName: null,
                    userPassword: null,
                    userPhone: null,
                    userEmail: null,
                    userImg: null,
                    userSalt: null,
                    credentialsSalt: null
                  }
                ],
                goodsCharacterList: [
                  {
                    characterId: null,
                    characterName: null,
                    characterNum: null,
                    characterImg: null,
                    characterPrice: null,
                    goodsId: null,
                    goods: null,
                    goodsList: [
                      {
                        goodsId: null,
                        goodsName: null,
                        goodsImg: null,
                        goodsPrice: null,
                        goodsDescribe: null,
                        goodsType: null,
                        categoryId: null,
                        monthlySales: null,
                        totalSales: null,
                        goodsState: null,
                        goodsCharacters: null,
                        category: null,
                        types: null,
                        categoryList: [
                          {
                            categoryId: null,
                            categoryName: null,
                            types: null,
                            goods: null
                          }
                        ],
                        typesList: [
                          {
                            typeId: null,
                            typeName: null,
                            typeUrl: null,
                            categoryId: null,
                            typeState: null,
                            goods: null,
                            category: null
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ],

        // listPut: [ // 修改类型的数据
        //   {
        //     "categoryId": null,
        //     "categoryName": null,
        //     "types": null,
        //     "goods": null
        //   },
        // ],
        listPost: [ // 添加类型的数据
          {
            "categoryId": null,
            "categoryName": null,
            "types": null,
            "goods": null
          },
        ],
        listLoading: true,
        dialogFormVisiblePut: false, // 修改类型弹窗
        dialogFormVisiblePost: false, // 添加类型弹窗
        form: {
          name: '12313',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    },
    created() {
      this.fetchData()
    },
    methods: {

      /*根据id添加类型*/
      dialogFormVisiblePostGo(categoryName){
        var that = this;
        dialogFormVisiblePostApi(categoryName,function(msg){
          if(msg.msg == '添加成功'){
            that.dialogFormVisiblePost = false;
            alert(msg.msg);
            that.fetchData();
          }
        })
      },



      /*根据id修改类型*/
      dialogFormVisiblePutGo(listPut){
        var that = this;
        dialogFormVisiblePutApi(listPut,function (msg) {
          if(msg.state == true){
            that.dialogFormVisiblePut = false;
          }
        })
      },
      /*修改获取当前数据*/
      dialogFormVisiblePutId(index){
        var that = this;
        that.listPut = that.list[index];
        that.addressLists = that.listPut.addressLists[0];
        console.log(that.listPut.addressLists[0].addrDetail)
        that.dialogFormVisiblePut = true;
      },


      // 根据id删除类型
      orderDel(orderId) {
        var that = this;
        orderDelApi(orderId, function(msg) {
          alert(msg.state);
          if(msg.state == true){
            that.fetchData()
          }

        })
      },

      // 自动加载刷新
      fetchData() {
        var that = this
        that.listLoading = true
        orderListApi(function(msg) {
          console.log(msg);
          that.list = msg.data;
          console.log(that.list);
          if (msg.msg === '查询情况') {
            that.listLoading = false
          }
        })

      }
    }
  }
</script>
